<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
</HEAD>

<BODY bgcolor="silver" oncontextmenu="return false">
<div id="data" style=""></div>
<textarea id="gen" rows=20 cols=120 style="position:absolute;top:300"></textarea>
<div id="other" style="position:absolute;left:400">
	<TABLE>
	<TR>
		<TD>description:</TD>
		<TD><input id="desc" value="Nice Try"></TD>
	</TR>
	<TR>
		<TD>unit</TD>
		<TD><input id="unit" value=4></TD>
	</TR>
	<TR>
		<TD>total.192</TD>
		<TD><input id="total"></TD>
	</TR>
	<TR>
		<TD>difficulty</TD>
		<TD><input id="diff" value=3></TD>
	</TR>
	<TR>
		<TD>rnum</TD>
		<TD><input id="rnum" value=3></TD>
	</TR>
	<TR>
		<TD>tnum</TD>
		<TD><input id="tnum" value=3></TD>
	</TR>
	<TR>
		<TD>time</TD>
		<TD><input id="time" value=10000></TD>
	</TR>
	<TR>
		<TD></TD>
		<TD><input type="button" value=generate onclick=generate()></TD>
	</TR>
	</TABLE>
</div>
</BODY>
</HTML>


<SCRIPT LANGUAGE="JavaScript">
var totalnum=0;
var clear = false;
var start = false;
var map =[];
function createDiv(){
	var div = document.createElement("div");
	div.style.background="white";
	div.style.width = 20;
	div.style.height = 20;
	div.style.position = "absolute";
	div.style.border = "1px solid silver";
	return div;
}
function createMap(){
	for(var i =0;i<14*18;i++){
		var d = createDiv();
		d.id = i;
		d.style.left = 20 *(i%18);
		d.style.top = 20* parseInt(i/18);
		map[i]=0;

		d.onmouseover = function(){
			if(start){
			
				if(!clear){if(this.style.background=="white"){this.style.background = "red";map[this.id]=1;total.value=(++totalnum);}}
					else {if(this.style.background=="red"){this.style.background = "white";map[this.id]=0;total.value=(--totalnum);}}

			 }
		}
		data.appendChild(d);
	}	
}
document.onmousedown = function(){
	start = true;
	if(event.button==2)clear = true;
	else clear = false;
}
document.onmouseup = function(){
	start = false;
}
createMap();

function generate(){
	var d  = desc.value;
	var to = total.value;
	var u = unit.value;
	var di = diff.value;
	var rn = rnum.value;
	var tn = tnum.value;
	var t = time.value;
	if(to%2!=0){alert("total must be even");return}
	var s="{desc:'"+d+"',unit:'"+u+"',place:'"+to+"',difficulty:'"+di+"',rnum:'"+rn+"',tnum:'"+tn+"',time:'"+t+"',data:'"+map.join('')+"'}";
	gen.value=s;
}
</SCRIPT>